<%--
  Created by IntelliJ IDEA.
  User: 郑自航
  Date: 2018/7/4
  Time: 11:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="${basePath}/layui/css/layui.css">
    <script type="text/javascript" src="${basePath}/js/plugin/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="${basePath}/js/plugin/jquery.i18n.properties.min.js"></script>
    <script src="${basePath}/layui/layui.js"></script>
</head>

<body class="page-body">
<div class="layui-inline"></div>
<div id="content">
    <form class="layui-form">
        <div class="layui-form-item">

                    <div class="layui-inline">
                        <label class="layui-form-label l-lab-text">姓名:</label>
                        <div class="layui-input-inline">
                            <input name="name" id="name_inputId" lay-verify="" placeholder="姓名" autocomplete="true" class="layui-input"
                                   type="text">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label l-lab-text">电话:</label>
                        <div class="layui-input-inline">
                            <input name="phone" id="phone_inputId" lay-verify="phone" placeholder="电话" autocomplete="true" class="layui-input"
                                   type="text">
                        </div>
                    </div>


                    <div class="layui-inline">
                        <label class="layui-form-label l-lab-text">昵称:</label>
                        <div class="layui-input-inline">
                            <input name="nickname" id="nickname_inputId" lay-verify="" placeholder="昵称" autocomplete="true" class="layui-input"
                                   type="text">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label l-lab-text">注册时间:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input Date" name="registTimeBegDate" id="registTimeBegDate" placeholder="yyyy-MM-dd HH:mm:ss" type="text">
                        </div>
                        <div class="layui-form-mid layui-word-aux"> -</div>
                        <div class="layui-input-inline">
                            <input class="layui-input Date" name="registTimeEndDate" id="registTimeEndDate" placeholder="yyyy-MM-dd HH:mm:ss" type="text">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label l-lab-text">授权时间:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input Date" name="createTimeBegDate" id="createTimeBegDate" placeholder="yyyy-MM-dd HH:mm:ss" type="text">
                        </div>
                        <div class="layui-form-mid layui-word-aux"> -</div>
                        <div class="layui-input-inline">
                            <input class="layui-input Date" name="createTimeEndDate" id="createTimeEndDate" placeholder="yyyy-MM-dd HH:mm:ss" type="text">
                        </div>
                    </div>

            <div class="layui-inline">
                <div class="layui-inline">
                    <button class="layui-btn l-lab-text" onclick="tableReload(1)">Search</button>
                    <button class="layui-btn layui-btn-warm l-lab-text" onclick="addOrUpdateUser()">Add</button>
                    <button type="reset" class="layui-btn layui-btn-primary l-lab-text">Rest</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="ibox-content">
    <table class="table-hide" id="demoTable" lay-data="{id: 'idApply'}" lay-filter="Apply"></table>
</div>
<script src="${basePath}/js/i18n.js"></script>
<script src="${basePath}/js/common.js"></script>
<script src="${basePath}/js/DateFormate.js"></script>
</body>
<script type="text/html" id="titleTpl4">
    {{# if(!(d.createTime)){ }}
    {{# } else { }}
    {{formatDateTime(new Date(d.createTime))}}
    {{# } }}
</script>
<script type="text/html" id="titleTpl5">
    {{# if(!(d.updateTime)){ }}
    {{# } else { }}
    {{ formatDateTime(new Date(d.updateTime)) }}
    {{# } }}
</script>
<script type="text/html" id="titleTpl_userStatus">
    {{# if(!(d.registTime)){ }}
     已授权
    {{# } else { }}
     已注册
    {{# } }}
</script>
<script type="text/html" id="titleTpl_registTime">
    {{# if(!(d.registTime)){ }}
    {{# } else { }}
    {{ formatDateTime(new Date(d.registTime)) }}
    {{# } }}
</script>
<script type="text/javascript">
    function addOrUpdateUser(id) {
        var layer = window.parent.layer;
        top.addUser_layer = layer.open({
            type: 2,
            title: top._loadText(id?'Update':'Add')+" "+top._loadText('User'),
            shadeClose: true,
            shade: false,
            // maxmin: true, //开启最大化最小化按钮
            area: ['460px', '600px'],
            content: 'userEdit.page' + (id ? "?id=" + id : ''),
            end:tableReload
        });
    }
    var table;
    //提交查询
        function tableReload(pageNO) {
            var queryParams;
            queryParams=$(".layui-form").serializeJson();
            // top.myLayer.alert(queryParams);
            // debugger
            table.reload('idApply', {
                where: queryParams,
                page: {
                    curr: pageNO?pageNO:1    //重新从第 n 页开始
                }
            });
            //自动切换语言
            doTranslateTable();
            return false;
        }
    /*初始化下拉选*/
    $(function () {

        debugger
        // 自动切换语言
        doTranslate();
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
            element.init();
//             element.init('breadcrumb');
//             element.render('nav');
//             element.render('tab');
//             //…
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //日期时间选择器
            var ids=['registTimeBegDate','registTimeEndDate','createTimeBegDate','createTimeEndDate'];
            //批量初始化
            initBatchDate(laydate,ids);
        });

        layui.use('table', function () {
            table = layui.table;
            var tableIns = table.render({
                elem: '#demoTable',
                url: '${basePath}/userInfo/user/findUserList.do',
                id: 'idApply',
                cellMinWidth: 120,
                page: {
                    limit:20
                },
                method: "post",
                done: function (res, curr, count) {
                },
                cols: [
                    [{
                        field: 'id',
                        type: 'checkbox',
                        title: 'ID',
                        sort: true,
                        fixed: 'left'
                    },
                    {
                        title: '<span  class="l-lab-text">Index</span>',
                        templet: '#indexTpl',
                        width: 60,
                        align: 'center'
                    },
                        {
                            field: 'name',
                            title: '<span  class="l-lab-text">姓名</span>',
                            width: 120,
                            sort: true,
                            align: 'center'
                        },
                        {
                            field: 'phone',
                            title: '<span  class="l-lab-text">电话</span>',
                            width: 120,
                            sort: true,
                            align: 'center'
                        },
                        {
                            field: 'nickname',
                            title: '<span  class="l-lab-text">昵称</span>',
                            width: 120,
                            sort: true,
                            align: 'center'
                        },
                        {
                            field: 'headPhoto',
                            title: '<span  class="l-lab-text">头像</span>',
                            width: 80,
                            sort: true,
                            align: 'center',
                            templet: titleTpl_headPhoto //自定义模板
                        },
                         {
                             field: 'status',
                             'title': '<span  class="l-lab-text">会员状态</span>',
                             width: 120,
                             sort: true,
                             align: 'center',
                             templet: titleTpl_userStatus //自定义模板
                         },
                         {
                             field: 'registTime',
                             'title': '<span  class="l-lab-text">注册时间</span>',
                             width: 160,
                             sort: true,
                             templet: titleTpl_registTime //自定义模板
                         },
                         {
                             field: 'createTime',
                             'title': '<span  class="l-lab-text">授权时间</span>',
                             width: 160,
                             sort: true,
                             templet: titleTpl4
                         },
                        {
                            field: 'totalConsume',
                            title: '<span  class="l-lab-text">总消费金额(￥)</span>',
                            width: 140,
                            sort: true,
                            align: 'center'
                        },
                         {
                             field: 'totalOrder',
                             'title': '<span  class="l-lab-text">支付订单数量</span>',
                             width: 120,
                             align: 'center',
                             sort: true
                         },
                        // {
                        //     fixed: 'right',
                        //     title: '<span  class="l-lab-text">Operation</span>',
                        //     align: 'center',
                        //     width: 120,
                        //     toolbar: '#barTools'
                        // }
                    ]
                ],
            });
            /*table.on('sort(idApply)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                debugger
            });*/
            //自动切换语言
            doTranslateTable();
            var $ = layui.$;

            layui.use('form', function () {
                var form = layui.form;
                //监听提交
                form.on('submit()', function (data) {
                    // debugger
                    // top.layer.msg(JSON.stringify(data.field));
                    return false;
                })
            });
            //监听批量删除按钮
            $('#btn_del').on('click', function () {
                var checkStatus = table.checkStatus('idApply'); //获取选中的列
                if (checkStatus.data.length != 0) {
                    top.layer.confirm('确认是否删除', function (index) {
                        top.layer.close(index);
                        var chk_value=new Array();
                        for (var i = 0; i < checkStatus.data.length; i++) {
                            chk_value.push(checkStatus.data[i].id+'');
                        }
                        var param = {
                            "ids": chk_value
                        };
                        $.ajax({
                            type: "POST",
                            url: "${basePath}/userInfo/user/deleteUserByIds.do",
                            data: param,
                            traditional: true,//这里设置为true
                            success: function(){tableReload(checkStatus.data[0].page)}
                        });
                    });
                } else {
                    top.layer.msg("请选择至少一条数据");
                }

                return false;
            });

            //监听工具条
            table.on('tool()', function (obj) {
                debugger
                var data = obj.data;
                var checkStatus = table.checkStatus('idApply');
                console.log(checkStatus.data);
                if (obj.event === 'del') {
                    top.layer.confirm('确认是否删除', function (index) {
                        var param = {
                            "id": data.id
                        };
                        $.ajax({
                            type: "POST",
                            url: "${basePath}/userInfo/user/deleteUser.do",
                            data: param,
                            success: function (data) {
                                top.layer.msg(data.msg);
                            }
                        });
                        obj.del();
                        top.layer.close(index);
                    });
                } else if (obj.event === 'update') {
                    var data = obj.data;
                    addOrUpdateUser(data.id);
                }else if(obj.event === 'view_photo'){
                    var data = obj.data;
                    console.log(data);
                    // return;
                    var photo = {
                        "title": "头像", //相册标题
                        "id": 123, //相册id
                        "start": 0, //初始显示的图片序号，默认0
                        "data": [   //相册包含的图片，数组格式
                            {
                                "alt": data.nickname,
                                "pid": data.id, //图片id
                                "src": data.headPhoto, //原图地址
                                "thumb": data.headPhoto //缩略图地址
                            }
                        ]
                    }
                    // var layer = window.parent.layer;
                    layer.photos({
                        photos: photo //格式见API文档手册页
                        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                    });
                }
            });
        });
    })
</script>
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="titleTpl_headPhoto">
    {{# if(!(d.headPhoto)){ }}
    {{# } else { }}
        <a class="layui-btn layui-btn-primary layui-btn-xs l-lab-text" lay-event="view_photo">查看</a>
    {{# } }}
</script>
<script type="text/html" id="barTools">
    <a class="layui-btn layui-btn-primary layui-btn-xs l-lab-text" lay-event="update">{{top._loadText('Update')}}</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs l-lab-text" lay-event="del">{{top._loadText('Delete')}}</a>
</script>

</html>